<template>
  <div>
    <div class="center-box">
      <div class="bq">
        <Icon type="ios-game-controller-b-outline" /><span>社区</span>
      </div>
      <!-- 抬头 -->
      <div class="center-top">
        <div class="header">
          <div class="header-but">
            <!-- <img class="header-person" :src="userInfo.face" alt="" /> -->
            <!-- <Avatar
                shape="circle"
                @on-error="(val)=>val.target.src = require('@/assets/communityimg/avatar.png')"
                class="header-person"
                :src="userInfo.face"
                icon="ios-person"
                size="28"
              /> -->
            <div class="header-right">
              <div class="header-name">
                <div class="headerAvatar">

                  <!-- <img :src="userInfo.face" alt="" /> -->
                  <Avatar
                    shape="circle"
                    @on-error="
                      (val) =>
                        (val.target.src = require('@/assets/communityimg/avatar.png'))
                    "
                    :src="userInfo.face"
                    icon="ios-person"
                    size="80"
                  />
                  <span class="header-one">{{ userInfo.nick_name }}</span>
                  <span class="header-two">{{ getAuthenticatioStatus}}</span>
                </div>
                <div class="otherInfo">
                  <div class="infoItem">
                    <span>{{ userInfo.myfouced }}</span>
                    <span>关注</span>
                  </div>
                  <div class="infoItem">
                    <span>{{ userInfo.fans }}</span>
                    <span>粉丝</span>
                  </div>
                  <div class="infoItem">
                    <span>{{ userInfo.numlike }}</span>
                    <span>点赞</span>
                  </div>
                </div>
                <!-- <div>
                  <span class="header-thir"> 关注 : </span
                  ><span>{{ userInfo.myfouced }}</span>
                  <span class="header-thir"> 粉丝 : </span
                  ><span>{{ userInfo.fans }}</span>
                  <span class="header-thir"> 点赞 : </span
                  ><span>{{ userInfo.numlike }}</span>
                </div> -->
              </div>
              <div class="header-bq" @click="handleFocus(userInfo)">
                <Icon type="ios-add-circle-outline" /><span>
                  <span>{{ userInfo.focus == "0" ? "+关注" : "已关注" }}</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div
        class="center"
        v-for="(item, index) in userInfoList"
        :key="index"
        @click="handleDetail(item)"
      >
        <div class="container">
          <div class="container-top">
            <div class="container-top-img">
              <!-- <img :src="item.face" alt="" /> -->
              <Avatar
                shape="circle"
                @on-error="
                  (val) =>
                    (val.target.src = require('@/assets/communityimg/avatar.png'))
                "
                :src="item.face"
                icon="ios-person"
                size="28"
              />
            </div>
            <div class="container-top-center">
              <div class="container-top-true">
                <div class="container-top-title">
                  <div class="container-top-one">
                    <span>{{ item.nick_name }}</span>
                    <div class="container-lable-yd">
                      <span>{{userInfo.status===1 ? userInfo.title :''}}</span>
                    </div>
                  </div>
                  <div class="container-top-two">{{ item.creattime }}</div>
                </div>
                <div class="container-contoin">{{ item.title }}</div>
                <div
                  class="main-container"
                  v-if="item.type == 1 && item.thumbs"
                >
                  <img
                    class="main-img"
                    v-for="(it, k) in item.thumbs.split(',')"
                    :key="k"
                    :src="it"
                    alt=""
                  />
                </div>
                <div
                  v-if="item.type == 2 && item.video_url"
                  class="container-video"
                >
                  <video
                    class="video-bb"
                    controls
                    :src="item.video_url"
                  ></video>
                </div>
              </div>
            </div>
          </div>
          <div class="container-but">
            <div class="ribbon">
              <Icon
                :type="item.havesc === 1 ? 'md-star' : 'ios-star-outline'"
                :color="item.havesc === 1 ? '#FDCD10' : ''"
              />
              <span>{{ item.is_sc }}</span>
            </div>
            <div class="ribbon">
              <Icon type="ios-share-outline" /> <span>{{ item.is_zf }}</span>
            </div>
            <div class="ribbon">
              <!-- <Icon type="ios-text-outline" /> <span>{{ item.is_sc }}</span> -->
              <Icon type="ios-text-outline" /> <span>{{ item.is_comits }}</span>
            </div>
            <div class="ribbon npk">
              <Icon type="ios-thumbs-up-outline" />
              <span>{{ item.is_like }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 内容结束 -->
    </div>
  </div>
</template>

<script>
import { userInfoData, followUser } from "@/api/community";
import { time } from "@/config/time";
export default {
  data() {
    return {
      getdata: {},
      userInfo: {},
      userInfoList: [],
      data: [],
    };
  },
  mounted() {
    this.getdata = this.$route.query;
    this.getUserInfo();
  },
  computed: {
    getAuthenticatioStatus() {
      if (this.userInfo.status === 1) {
        return this.userInfo.title;
      }

      return "";
    },
  },
  methods: {

    // 关注接口
    // 关注
    handleFocus(userInfo) {
      //console.log(userInfo,'231221312');
      this.followUser(userInfo);
    },
    followUser(e) {
      followUser({
        mid: JSON.parse(localStorage.userInfo).id,
        foucsid: e.aouthid,
        type: e.focus == 1 ? 0 : 1, // 0 取消， 1 关注
      }).then((res) => {
        if (res.code == 1) {
          this.getUserInfo();
        }
      });
    },

    // 获取他人主页

    getUserInfo() {
      userInfoData({
        mid: JSON.parse(localStorage.userInfo).id,
        page: 1,
        pagesize: 10,
        aouthid: this.getdata.aouthid,
      }).then((res) => {
        console.log(res, "个人主页");
        if (res.code === 1) {
          this.userInfo = {
            ...res.userinfo,
            fans: res.fans,
            numlike: res.numlike,
            myfouced: res.myfouced,
          };
          console.log("🚀🚀", this.userInfo, "this.userInfo");
          this.userInfoList = [...this.userInfoList, ...res.data];
          this.total = res.total;
          this.userInfoList.map((item) => {
            item.creattime = time.getTime(item.creattime);
          });
        }
      });
    },
    // 跳转详情
    handleDetail(item) {
      this.$router.push({
        path: "/comment",
        query: {
          id: item.id,
        },
      });
    },
    // 跳转至个人中心
    toHeader(item) {
      this.$router.push({
        path: "/personalpage",
        query: {
          id: item.id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
body {
  background-color: #929292;
}

.center-box {
  width: 545px;
  // height: 400px;
  // border: 1px solid rgb(73, 11, 11);
  margin: 0 auto;

  .bq {
    span {
      margin-left: 10px;
    }
  }

  .center-top {
    width: 545px;
    // height: 900px;
    background: #ffffff;
    border-radius: 6px;

    // border: 1px solid red;
    .header {
      width: 545px;
      height: 220px;
      background: #980707;
      border-radius: 6px;
      background: url(./fcz.jpeg);
      display: flex;
      align-items: flex-end;
      border-radius: 6px;
      margin-bottom: 12px;

      .header-but {
        width: 100%;
        height: 68px;
        // border: 1px solid red;
        display: flex;
        justify-content: flex-end;
        position: relative;
        background-color: #fff;

        .header-person {
          width: 66px;
          height: 66px;
          border-radius: 50%;
          position: absolute;
          top: -30px;
          left: 23px;
        }

        .header-right {
          // width: 443px;
          width: 100%;
          height: 100%;
          // border: 1px solid red;
          display: flex;
          flex-wrap: wrap;
          color: #202020;

          img {
            width: 8px;
            height: 10px;
          }

          .header-name {
            width: 100%;
            margin-top: -70px;
            .headerAvatar {
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 100%;

            }
            .otherInfo {
              display: flex;
              .infoItem {
                display: flex;
                flex-direction: column;
                margin:0 10px ;
                align-items: center;
              }
            }
            .header-one {
              font-size: 10px;
            }

            .header-two {
              color: #929292;
              font-size: 8px;
            }

            .header-thir {
              color: #929292;
              font-size: 8px;
            }
          }

          .header-bq {
            width: 50px;
            height: 19px;
            border-radius: 10px;
            position: absolute;
            right: 20px;
            top: 23px;
            background-color: #dedede;
            text-align: center;
            line-height: 19px;
            font-size: 9px;
          }

          // background-color: #980707;
        }
      }
    }
  }

  // 内容样式
  .center {
    width: 100%;
    // height: 500px;
    // border: 1px solid red;
    // background-color: #FD5151;
    margin-bottom: 9px;

    .container {
      width: 100%;
      // height: 350px;
      // border: 1px solid rgb(27, 98, 213);
      border-radius: 6px;
      background-color: #fff;

      .container-top {
        width: 100%;
        // height: calc(350px - 36px);
        // border: 1px solid red;
        padding-top: 12px;
        display: flex;
        justify-content: flex-start;

        .container-top-img {
          width: 28px;
          height: 100%;
          margin-left: 12px;

          > img {
            width: 28px;
            height: 28px;
            border-radius: 50%;
          }
        }

        .container-top-center {
          width: 100%;
          height: 100%;
          // background-color: rgb(43, 12, 12);
          padding-right: 45px;

          .container-top-true {
            width: 100%;
            height: 100%;

            // background-color: rgb(26, 44, 162);
            .container-top-title {
              width: 100%;
              height: 38px;
              // border: 1px solid red;
              display: flex;
              flex-wrap: wrap;
              margin-bottom: 9px;

              .container-top-one {
                width: 100%;
                height: 14px;
                font-size: 8px;
                font-weight: 500;
                color: #333333;
                display: flex;
                align-items: center;
                justify-content: flex-start;

                .container-lable-yd {
                  width: auto !important;
                  padding: 0 6px;
                  height: 11px;
                  // background: #fcf0f0;
                  border-radius: 2px;
                  width: 20px;
                  font-size: 7px;
                  font-weight: 400;
                  color: #fd5151;
                  line-height: 11px;
                  margin-left: 10px;
                }
              }

              .container-top-two {
                width: 100%;
                height: 14px;
                font-size: 7px;

                font-weight: 400;
                color: #acacac;
              }
            }

            .container-contoin {
              margin-bottom: 12px;
              font-size: 8px;
              font-weight: 400;
              color: #333333;
              line-height: 14px;
              // border: 1px solid red;
            }

            .main-container {
              width: 100%;
              min-height: 0px;
              // background-color: #FD5151;
              display: flex;
              flex-wrap: wrap;

              .main-img {
                width: 32%;
                display: inline-block;
                height: 86px;
                border-radius: 3px;
                margin-bottom: 7px;
                background-color: #dedede;
                object-fit: scale-down;
              }
            }

            .container-video {
              width: 100%;

              // height: 313px;
              .video-bb {
                width: 100%;
                max-height: 200px;
                // height: 178px;
              }
            }
          }
        }
      }

      .container-but {
        widows: 100%;
        // background-color: rgb(49, 103, 197);
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #ececec;

        .ribbon {
          width: 25%;
          height: 100%;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 1px solid #ececec;
        }

        .npk {
          border-right: none;
        }
      }
    }
  }
}
</style>
